<template>
	<view class="joinPartyWp">
		<view class="top">
			<view class="timeWp" @click="chooseTime">
				<text class="nowTime">{{month}}</text> 月
				<img class='btn-small' src="https://file.casugn.com/storecompcard/temp/三角_1655190024146.png" alt="">
			</view>
		</view>
		<view v-for="(item,i) in list" :key="item.id">
			<partyItem :isJoin="true" :showBtn="item.isShow==1" :showMark="true" :item="item" @handleItem='handleItem'
				@handleBtn="gotoTalk" btnName="组局聊天">
			</partyItem>
		</view>
		<nodata v-if="!list || list.length==0" nodataText="暂时没有组局"
			nodataImgUrl="https://file.casugn.com/storecompcard/temp/空页面@2x(14)_1681113729843.png">
		</nodata>
		<u-datetime-picker :show="showPicker" v-model="pickerTime" mode="year-month" closeOnClickOverlay
			@confirm="confirm" @cancel="closePicker" @change="changeHandler" @close="closePicker"></u-datetime-picker>

	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	import {
		mapGetters
	} from 'vuex'
	import partyItem from '@/pagesParty/components/partyItem/partyItem.vue'
	export default {
		components: {
			partyItem,
			nodata
		},
		data() {
			return {
				list: [],
				showPicker: false,
				month: '',
				pickerTime: Number(new Date()),
				queryTime: null,
				//子组件传值 
				selectItem: null,
				status: null,
				openId: '',
				partakeStatus: '', //0未处理，1已参加，2已拒绝
				switchId: '',
				pageNo: 1,
				total: 0,
				pageSize: 20

			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		created() {
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			this.openId = openId.openid


		},
		onShow() {
			this.nowTime()
			this.partakeStatus = ''
			this.resetList()
		},
		onReachBottom() {
			if (this.total <= this.pageNo * this.pageSize) {
				uni.showToast({
					title: '没有更多数据',
					icon: 'none'
				})
				return
			} else {
				this.pageNo++
				this.queryPartyList()
			}

		},
		//下拉刷新状态
		onPullDownRefresh() {
			this.partakeStatus = ''
			this.nowTime()
		},
		methods: {
			resetList() {
				uni.showLoading({
					title: '加载中'
				})
				this.partakeStatus = ''
				this.list = []
				this.total = 0
				this.pageNo = 1
				this.queryPartyList()
			},
			switchClick() {
				this.switchShow = true
			},
			// 确定选择状态
			switchConfirm(val) {
				this.switchShow = false
				console.log(val.value[0])
				this.switchValue = val.value[0].label
				this.partakeStatus = val.value[0].id
				this.list = []
				this.total = 0
				this.pageNo = 1
				this.queryPartyList()
			},
			//状态改变
			changeSwitch(val) {
				console.log(val, '状态改变');
				this.switchValue = val.value[0].label
				this.partakeStatus = val.value[0].id
			},
			//获取当月时间
			nowTime() {
				let now = new Date();
				this.month = now.getMonth() + 1
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(now, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//选择时间
			chooseTime() {
				this.showPicker = true
			},
			closePicker() {
				this.showPicker = false
			},
			//时间选择改变
			changeHandler(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
			},
			//点击列表项
			handlePartyListItem({
				item,
				index
			}) {
				console.log(item, '点击列表项Item');
				this.partyInfoItem = item
				this.model = true
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let str = timeFormat(e.value, 'yyyy-mm')
				let aa = str.split('-')[1].split("")
				console.log(aa)
				if (aa[0] == 0) {
					this.month = aa[1]
				} else {
					this.month = aa[0] + aa[1]
				}
				//设定为当月一号
				str = str + '-01'
				console.log(str);
				this.queryTime = str
				this.showPicker = false
				this.switchValue = '全部'
				this.partakeStatus = ''
				this.resetList()
			},
			// 查詢列表信息
			async queryPartyList() {
				uni.showLoading({
					title: '加载中'
				})
				let payload = {
					category: 2, //0：全部，1：我发布 2：我参加
					date: this.queryTime,
					openId: this.openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: '' //0未处理，1已参加，2已拒绝,默认显示全部
				}
				let res = await this.$api.queryWaitGroupPage(payload) //待参加
				if (res.success && res.result.records.length > 0) {
					console.log(res.result.records);
					this.list = [...this.list, ...res.result.records]
					this.total = res.result.total
				} else {
					uni.showToast({
						title: '未查询到相应数据',
						icon: 'none'
					});
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			showModel({
				item,
				index
			}) {
				this.selectItem = {
					item,
					index
				}
				this.model = false
			},

			//去聊天
			async gotoTalk(item) {
				console.log(item, '组局信息');
				let payload = {
					roomId: item.roomId,
					openId: this.userInfo.openId

				}
				let res = await this.$api.goOnline(payload)
				if (res.success && res.result) {
					//进入组局聊天
					uni.navigateTo({
						url: `/pagesParty/chatRoom/chatRoom?roomId=${item.roomId}&chatTitle=${item.title}&type=${3}`
					})
				} else {
					return uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}


			},
			//显示详情
			handleItem(data) {
				console.log(data, 'data');
				let url = `/pagesParty/party/joinParty/joinPartyInfo?id=${data.id}&membersStatus=${data.membersStatus}`
				this.$goToPage(url)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.joinPartyWp {
		padding-top: 1rpx;
		min-height: 100vh;
		background-color: #f7f8fa;

		position: relative;

		.top {
			padding-right: 32rpx;
			height: 60rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #f7f8fa;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;

			.timeWp {
				height: 60rpx;

				.nowTime {
					font-size: 32upx;
					padding-right: 10upx;

				}
			}

			.btn-small {
				margin-left: 10upx;
				width: 20upx;
				height: 15upx;
			}
		}

	}
</style>